<template>
  <div class="table-content">
    <el-table
      ref="tableRef"
      v-loading="loading"
      :class="isMoreHeader ? 'my-more-table' : 'my-table'"
      border
      highlight-current-row
      :data="tableData"
      style="width: 100%"
      :row-key="rowKey"
      :height="tableHeight"
      :header-cell-style="isMoreHeader ? EltableMoreHeaderStyle : EltableHeaderStyle"
      :default-expand-all="expandAll"
      :tree-props="treeProps ? treeProps : { children: 'permissions', hasChildren: 'hasChildren' }"
      :lazy="lazyTree"
      :load="handleLazyLoad"
      @current-change="handleRowChange"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @expand-change="handleExpentChange"
    >
      <el-table-column
        v-if="isSelection"
        :reserve-selection="true"
        :fixed="true"
        type="selection"
        align="center"
        width="55"
      ></el-table-column>
      <el-table-column
        v-if="isSlotNum"
        v-slot="{ $index }"
        label="序号"
        :fixed="true"
        type="index"
        align="center"
        width="70"
      >
        <span v-if="isPager">{{ $index + (pageConfig.pageIndex - 1) * pageConfig.pageSize + 1 }}</span>
        <span v-else>{{ $index + 1 }}</span>
      </el-table-column>

      <template v-if="isMoreHeader">
        <template v-for="(item, index) in tableHeaders" :key="index">
          <more-table v-if="item?.children && item?.children?.length" :item-child="item"></more-table>
          <el-table-column
            v-else
            :label="item?.cellName"
            :custom="item?.cellDataKey"
            :prop="item?.cellDataKey"
            :align="item?.cellAlignment || 'center'"
            :min-width="item?.cellWidth || 100"
            :show-overflow-tooltip="false"
          >
            <template #default="scope">
              {{ scope.row[item?.cellDataKey] }}
            </template>
          </el-table-column>
        </template>
      </template>
      <template v-else>
        <el-table-column
          v-for="(item, index) in tableHeaders"
          :key="index"
          :label="item.name"
          :custom="item.key"
          :prop="item.key"
          :align="item.align || 'center'"
          :fixed="item.fixed"
          :min-width="item.wid"
          :show-overflow-tooltip="item.showTooltip ?? true"
          :empty-text="emptyText"
        >
          <template #default="scope">
            <template v-if="item.slotName">
              <slot :name="item.slotName" v-bind="scope"></slot>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="isPager" class="pagination-box">
      <el-pagination
        :current-page="pageConfig.pageIndex"
        :page-size="pageConfig.pageSize"
        :total="Number(pageConfig.total)"
        background
        small
        :page-sizes="[20, 50, 100, 200]"
        :layout="'total, sizes, jumper, prev, pager, next'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts" name="tableContent">
import { PropType } from 'vue'
import { ElTable } from 'element-plus'
import MoreTable from './moreTable.vue'
const tableRef = ref<InstanceType<typeof ElTable>>()

const props = defineProps({
  // 是否显示序号，默认为true
  showIndex: {
    type: Boolean,
    default: true
  },
  // loading
  loading: {
    type: Boolean,
    default: false
  },
  // 表格数据
  tableData: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  // 表格头
  tableHeaders: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  // 页码配置 total是字符串
  pageConfig: {
    type: Object as PropType<{ pageIndex: number; pageSize: number; total: number }>,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  },
  // 动态计算的表格高度
  tableHeight: {
    type: [String, Number],
    default: 'auto'
  },
  // 是否展示页码
  isPager: {
    type: Boolean,
    default: true
  },
  // 是否显示序号
  isSlotNum: {
    type: Boolean,
    default: true
  },
  // 表格树参数
  treeProps: {
    type: Object as PropType<any>,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {}
  },
  // 是否显示复选框
  isSelection: {
    type: Boolean,
    default: false
  },
  // 是否是多级表格
  isMoreHeader: {
    type: Boolean,
    default: false
  },
  // 树结构是否默认展开
  expandAll: {
    type: Boolean,
    default: true
  },
  // table主键
  rowKey: {
    type: String,
    default: 'id'
  },
  // 空文字提示
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  // 是否树节点懒加载
  lazyTree: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([
  'pageSizeChange',
  'currentPageChange',
  'handleRowChange',
  'sortSearch',
  'handleSelectionChange',
  'handleRowClick',
  'handleLazyLoad',
  'handleExpentChange'
])

/**
 * 每页条数变化
 *  @param {Number} val 当前设置的每页条数
 */
const handleSizeChange = (val: number) => {
  emit('pageSizeChange', val)
}

/**
 * 当前页码变化
 *  @param {Number} val 当前页码
 */
const handleCurrentChange = (val: number) => {
  emit('currentPageChange', val)
}

/**
 * 选择单行数据触发事件
 *  @param {Oobject} val 当前选中行数据
 */
const handleRowChange = (val: unknown) => {
  emit('handleRowChange', val)
}
const handleSelectionChange = (val: any) => {
  emit('handleSelectionChange', val)
}
// 点击行回调
const handleRowClick = (val: unknown) => {
  emit('handleRowClick', val)
}
// 树节点懒加载回调
const handleLazyLoad = (row: any, treeNode: any, resolve: any) => {
  emit('handleLazyLoad', row, treeNode, resolve)
}
// 展开行回调
const handleExpentChange = (row: any, rows: any[]) => {
  emit('handleExpentChange', row, rows)
}
// 表头样式
const EltableHeaderStyle = {
  backgroundColor: '#EDF3FF',
  color: '#333333',
  fontSize: '14px',
  fontWeight: 500
}
// 多级表头样式
const EltableMoreHeaderStyle = {
  backgroundColor: '#EDF3FF',
  borderColor: '#ccc',
  color: '#333333',
  fontSize: '14px',
  fontWeight: 500
}
// 双击排序
const changeSort = (e: { order: string; prop: any }) => {
  const customOrder = e.order === 'ascending' ? `asc_${e.prop}` : `desc_${e.prop}`
  emit('sortSearch', customOrder)
}
// 子组件中获取不到element组件自身的方法，再转化一遍（店铺营业设置多选框table有用到）
const toggleRowSelection = (row: any, bol: boolean) => {
  tableRef.value?.toggleRowSelection(row, bol)
}
const clearSelection = () => {
  tableRef.value?.clearSelection()
}
const getAllSelectItem = () => {
  return tableRef.value?.getSelectionRows()
}
defineExpose({
  toggleRowSelection,
  clearSelection,
  getAllSelectItem
})
</script>
<style lang="scss" scoped>
.pager-container {
  background: #fff;
  height: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
}

.pager-container.hidden {
  display: none;
}

:deep(.el-pagination.is-background) {
  .btn-prev,
  .btn-next {
    border-radius: 4px;
    background-color: $--color-primary;
    color: #fff;

    &:hover:not([disabled]) {
      color: #fff;
    }
  }

  .el-pager {
    .number {
      border-radius: 4px;
      color: #999;
      background-color: transparent;
    }

    li:not(.is-disabled).is-active {
      background-color: transparent;
      border: 1px solid #ccc;
      color: #333;
    }
  }
}
:deep(.el-table tr) {
  height: 41px;
}
.pagination-box {
  margin-top: 12px;

  .el-pagination {
    justify-content: flex-end;
  }
}
// 避免滚动条遮挡表体最后一行，但是会造成空表(表格无数据时)也会出现滚动条
:deep(.el-table__body) {
  margin-bottom: 10px;
}

:deep(.el-table th.el-table__cell > .cell .el-checkbox) {
  margin: 0 auto;
}
:deep(.el-table--border .el-table__inner-wrapper::after) {
  display: none;
}
:deep(.el-table__body tr:hover > td.el-table__cell) {
  background-color: #f2f2f2 !important;
  // color:$--color-primary;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: #f2f2f2 !important;

  .cell {
    color: $--color-primary;
  }
}
:deep(.el-button) {
  line-height: 20px !important;
  height: 20px !important;
}
:deep(.el-switch) {
  line-height: 20px !important;
  height: 20px !important;
}
:deep(.el-table--border .el-table__inner-wrapper tr:first-child td:first-child) {
  border-left: none;
}
</style>
<style lang="scss">
// table 样式

.my-table {
  .el-table__inner-wrapper tr:first-child td:first-child {
    border-left: none;
  }
  .el-table__header .el-table__cell {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .el-table__cell {
    border-right: none !important;
    padding: 6px 0 !important;
  }

  th.el-table__cell > .cell {
    border-right: 1px solid #ccc;
    line-height: 21px;
  }

  th.el-table__cell:last-child > .cell {
    border-right: 0 !important;
  }

  // table 滚动条一直显示
  .el-scrollbar__bar.is-horizontal {
    display: block !important;
  }
}
.my-more-table {
  // table 滚动条一直显示
  .el-scrollbar__bar.is-horizontal {
    display: block !important;
  }
}
</style>
